<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <base th:href="@{/}" href="/bookstore/"/>

    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/cart.css" />
    <!-- 引入vue -->
    <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="index.html">
            <img src="static/img/logo.gif" alt=""
          /></a>
          <h1>我的购物车</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span th:text= "${session.loginUser.userName}"></span>光临书城</h3>
          <div class="order"><a href="protected/orderClient?method=toUserOrderPage">我的订单</a></div>
          <div class="destory"><a href="index.html">注销</a></div>
          <div class="gohome">
            <a href="index.html">返回</a>
          </div>
        </div>
      </div>
    </div>
    <!--vue数据绑定-->
    <div class="list" id="app">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <!-- 购物⻋为空 -->
          <tbody v-if="cart.totalCount <= 0">
          <tr>
            <td colspan="6">
              <a href="index.html">购物⻋空空如也，请抓紧选购!!!</a>
            </td>
          </tr>
          </tbody>
          <!-- 购物⻋不为空 -->
          <tbody>
            <tr v-for="(cartItem,index) in cart.cartItemList">
              <td>
                <img v-bind:src="cartItem.imgPath" alt="" />
                <input type="hidden" name="bookId" v-model="cartItem.bookId"/>
              </td>
              <td v-text="cartItem.bookName">教父</td>
              <td>
                <a @click="countDecrease(cartItem.count,cartItem.bookName,cartItem.bookId,index)" class="count" href="javascript:;">-</a>
                <input class="count-num" type="text" v-model="cartItem.count" @change="updateCartItemCount(cartItem.count,cartItem.bookId,index)"/>
                <a class="count" @click="countIncrease(cartItem.bookId,index)">+</a>
              </td>
            <td v-text="cartItem.price"></td>
            <td v-text="cartItem.amount"></td>
            <td> <a href="#" @click.prevent="removeCartItem(cartItem.bookName,cartItem.bookId,index)">删除</a></td>
          </tr>
        </tbody>

        </table>
        <div class="footer">
          <div class="footer-left">
            <a href="protected/cart?method=cleanCart" class="clear-cart">清空购物⻋</a>
            <a href="#">继续购物</a> </div>
          <div class="footer-right">
            <div>共<span v-text="cart.totalCount">3</span>件商品</div>
            <div class="total-price">总金额<span v-text="cart.totalAmount">99.9</span>
              元</div>
            <a class="pay" href="protected/orderClient?method=checkout">去结账</a>
          </div>
        </div>
      </div>
    </div>
    <!--vue数据绑定-->
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="static/img/bottom1.png" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom.png" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="static/img/bottom2.png" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于我们</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>https://www.drimwai.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        Drimwai's Bookstore.Copyright ©2021
      </div>
    </div>


    <!-- vue代码 -->
    <script>
      var vue = new Vue({
        "el":"#app",
        "data":{
          "cart":{
            "totalCount":0,
            "totalAmount":0,
            "cartItemList":[]
          } },
        "methods": {
          showCart() {
            //发送异步请求获取购物⻋的信息
            axios({
              "method": "post",
              "url": "protected/cart",
              "params": {
                "method": "getCartJSON"
              }
            }).then(response => {
              if (response.data.flag){
                this.cart = response.data.resultData
              } else {
                if (response.data.message == "unLogin") {
                  location.href = "user?method=toLoginPage"
                }else {
                  //说明显示购物⻋信息失败
                  alert("显示购物⻋信息失败")
                }
              }
            })
          },
          countDecrease(count, bookName, bookId, index) {
            //判断当前购物项的count是否为1
            if (count == 1) {
              //弹出一个确认框，询问是否真的要删除
              if (!confirm("你确定要删除这个" + bookName + "购物项吗?")) {
                return;
              }
            }
            //发送异步请求
            axios({
              "method": "post",
              "url": "protected/cart",
              "params": {
                "method": "countDecrease",
                "id": bookId
              }
            }).then(response => {
              //判断count是否为1
              if (count == 1) {
                //1. 删除当前购物项:根据下标删除cart.cartItemList中的元素
                this.cart.cartItemList.splice(index, 1)
              } else {
                //1. 重新设置当前购物项的count以及amount
                this.cart.cartItemList[index].count = response.data.resultData.count
                this.cart.cartItemList[index].amount = response.data.resultData.amount
              }
              //2. 重新设置当前购物⻋的totalCount以及totalAmount
              this.cart.totalCount = response.data.resultData.totalCount
              this.cart.totalAmount = response.data.resultData.totalAmount
            })
          },
          countIncrease(bookId,index){
            //发送异步请求
            axios({
              "method":"post",
              "url":"protected/cart",
              "params":{
                "method":"countIncrease",
                "id":bookId
              }
            }).then(response => {
              //1. 重新设置当前购物项的count以及amount
              this.cart.cartItemList[index].count = response.data.resultData.count
              this.cart.cartItemList[index].amount = response.data.resultData.amount
              //2. 重新设置当前购物⻋的totalCount以及totalAmount
              this.cart.totalCount = response.data.resultData.totalCount
              this.cart.totalAmount = response.data.resultData.totalAmount
            })
          },
          removeCartItem(bookName,bookId,index){
            if (confirm("你确定要删除" + bookName + "这个购物项吗?")) {
              axios({
                "method":"post",
                "url":"protected/cart",
                "params":{
                  "method":"removeCartItem",
                  "id":bookId
                }
              }).then(response => {
                //1. 将当前购物项这行删除
                this.cart.cartItemList.splice(index,1)
                //2. 重新设置购物⻋的totalCount和totalAmount
                this.cart.totalCount = response.data.resultData.totalCount
                this.cart.totalAmount = response.data.resultData.totalAmount
              })
            }
          },
          updateCartItemCount(newCount,bookId,index){
            //判断新的数量是否符合规范
            var reg = /^[1-9][0-9]*$/
            if (reg.test(newCount)) {
              //符合规范，则发送异步请求
              axios({
                "method":"post",
                "url":"protected/cart",
                "params":{
                  "method":
                     "updateCartItemCount",
                     "id":bookId,
                     "newCount":newCount
                }
              }).then(response => {
                //1. 重新渲染当前购物项的count、amount
                this.cart.cartItemList[index].count = response.data.resultData.count
                this.cart.cartItemList[index].amount = response.data.resultData.amount
                //2. 重新渲染当前购物⻋的totalCount、totalAmount
                this.cart.totalCount = response.data.resultData.totalCount
                this.cart.totalAmount = response.data.resultData.totalAmount
              })
            }
          }
        },
        created() {
          //钩子函数，在这个钩子函数中就能使用数据模型
          this.showCart()
        }
      });
    </script>
  </body>
</html>
